import { ReportDats } from '@/utils';
import './index.less';
import { FadeIn } from '@/components/Animation';
export default function Report() {
  const viewPdf = (url: string) => {
    window.open(url, '_blank');
  };
  return (
    <div className="reportPage page">
      <div style={{ height: '20vh' }}></div>
      <div className="pagemask">
        <div className="rpAdmin mainWidth">
          <div className="w1100 tcon">
            <FadeIn>
              <div className="title">Sample reports</div>
            </FadeIn>
            <FadeIn delay={0.3}>
              <div className="desc">
                The reports available for download here are examples of standard DJX pdf reports
                within different verticals.
              </div>
            </FadeIn>
          </div>
        </div>
        <div className="fpconWrap ">
          <div className="fpconOut">
            <FadeIn className="mainWidth fpcon list" delay={0.6}>
              {ReportDats.map((item: any, i: number) => (
                <div className="tcard pointer" onClick={() => viewPdf(item.href)} key={i}>
                  <img src={item.img} alt="" />
                  <div className="txt center">{item?.txt}</div>
                </div>
              ))}
            </FadeIn>
          </div>
        </div>
      </div>
    </div>
  );
}
